<template>
  <div>
    <LoginModel
      v-if="showType == 'login'"
      :visible="showType == 'login' && modelShow"
      @closeModel="closeModel"
      @loginSuccess="loginSuccess"
      ref="loginModel"
    />
    <userInfoModel
      v-if="showType == 'user'"
      :visible="showType == 'user' && modelShow"
      @closeModel="closeModel"
      @goLogin="goLogin"
    />
    <PreviewMedia
      v-if="showType == 'media'"
      :visible="showType == 'media' && modelShow"
      :url="options.url"
      :title="options.title"
      @closeModel="closeModel"
    />
    <UploadImageModal
      v-if="showType == 'upload'"
      :visible="showType == 'upload' && modelShow"
      :userId="options.userId"
      :answeUserId="options.answeUserId"
      @closeModel="closeModel"
      @uploadImage="uploadImage"
    />
    <UserAgreement
      v-if="showType == 'agreement'"
      :visible="showType == 'agreement' && modelShow"
      @closeModel="closeModel"
    />
    <PrivacyAgreement
      v-if="showType == 'privacy'"
      :visible="showType == 'privacy' && modelShow"
      @closeModel="closeModel"
    />
  </div>
</template>

<script>
  import LoginModel from './loginModel.vue'
  import userInfoModel from './userInfoModel.vue'
  import PreviewMedia from './previewMedia.vue'
  import UploadImageModal from './uploadImageModal.vue'
  import UserAgreement from './userAgreement.vue'
  import PrivacyAgreement from './privacyAgreement.vue'
  export default {
    name: 'CustomModel',
    props: {
      type: String,
      options: Object,
    },
    components: {
      LoginModel,
      userInfoModel,
      PreviewMedia,
      UploadImageModal,
      UserAgreement,
      PrivacyAgreement,
    },
    data() {
      return {
        modelShow: true,
        showType: '',
      }
    },
    computed: {},
    watch: {},
    created() {
      this.showType = this.type
    },

    mounted() {},
    methods: {
      goLogin() {
        this.showType = 'login'
      },
      loginSuccess() {
        this.$emit('loginSuccess')
      },
      uploadImage(list1, list2) {
        console.log('upload in custom model :>> ', list1, list2)
        this.$emit('uploadImageToChat', list1, list2)
      },
      closeModel(refresh = false) {
        console.log('close custom model :>> ')
        this.modelShow = false
        this.$emit('closeModel', refresh)
      },
    },
  }
</script>
<style scoped lang="less"></style>
